<template>
  <div class="root">
    <div class="chart-wrapper chart1">
      <van-cell title="辖区内所有企业税收环比" />
      <canvas id="jiedaoshuishouhuanbi"></canvas>
    </div>
    <div class="chart-wrapper chart1">
      <van-cell title="辖区内所有企业税收走势" />
      <canvas id="jiedaoshuishouzoushi"></canvas>
    </div>
    <div class="chart-wrapper chart-tab">
      <van-cell title="产业税收贡献排行" />
      <van-tabs type="card" @click="tabsChange" animated>
        <van-tab title="今年">
          <canvas id="chanyeshuishougongxian"></canvas>
        </van-tab>
        <van-tab title="去年">
          <canvas id="qunianchanyeshuishougongxian"></canvas>
        </van-tab>
      </van-tabs>
    </div>
    <div class="chart-wrapper chart-big">
      <van-cell title="本年度企业税收分析" />
      <canvas id="qiyenashuifenxi"></canvas>
    </div>
    <div class="chart-wrapper chart-big yuanqushuishoufenxi">
      <van-cell title="本年度园区税收分析" />
      <canvas id="yuanqushuishoufenxi"></canvas>
    </div>
    <!-- <div class="chart-wrapper2 chart2">
      <van-cell title="本年度园区税收分析" />
      <div class="content-box">
        <div class="point"></div>
        <div class="right-box">
          <p>0-100万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color2"></div>
        <div class="right-box">
          <p>100万-500万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color3"></div>
        <div class="right-box">
          <p>500万-1000万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color4"></div>
        <div class="right-box">
          <p>1000万-5000万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color5"></div>
        <div class="right-box">
          <p>5000万以上</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point"></div>
        <div class="right-box">
          <p>0-100万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color2"></div>
        <div class="right-box">
          <p>100万-500万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color3"></div>
        <div class="right-box">
          <p>500万-1000万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color4"></div>
        <div class="right-box">
          <p>1000万-5000万</p>
          <p>26.9%</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color5"></div>
        <div class="right-box">
          <p>5000万以上</p>
          <p>26.9%</p>
        </div>
      </div>
    </div>-->
  </div>
</template>

<script>
import {
  jiedaoshuishouhuanbi,
  jiedaoshuishouzoushi,
  chanyeshuishougongxian,
  qiyenashuifenxi,
  yuanqushuishoufenxi,
  zhucezoushifenxi,
} from "../../assets/js/f2.js";
export default {
  data() {
    return {
      lastYearFlag:0,
    };
  },
  created() {},
  mounted() {
    var data1 = [
      {
        time: "2016-01-08 00:10:00",
        value: 10,
        type: "2020年",
      },
      {
        time: "2016-02-08 00:10:00",
        value: 22,
        type: "2020年",
      },
      {
        time: "2016-03-08 00:30:00",
        value: 16,
        type: "2020年",
      },
      {
        time: "2016-04-09 00:35:00",
        value: 26,
        type: "2020年",
      },
      {
        time: "2016-05-09 01:00:00",
        value: 12,
        type: "2020年",
      },
      {
        time: "2016-06-09 01:20:00",
        value: 26,
        type: "2020年",
      },
      {
        time: "2016-07-10 01:40:00",
        value: 18,
        type: "2020年",
      },
      {
        time: "2016-08-10 02:00:00",
        value: 26,
        type: "2020年",
      },
      {
        time: "2016-01-08 00:10:00",
        value: 4,
        type: "2019年",
      },
      {
        time: "2016-02-08 00:10:00",
        value: 3,
        type: "2019年",
      },
      {
        time: "2016-03-08 00:30:00",
        value: 6,
        type: "2019年",
      },
      {
        time: "2016-04-09 00:35:00",
        value: -12,
        type: "2019年",
      },
      {
        time: "2016-05-09 01:00:00",
        value: 1,
        type: "2019年",
      },
      {
        time: "2016-06-09 01:20:00",
        value: 9,
        type: "2019年",
      },
      {
        time: "2016-07-10 01:40:00",
        value: 13,
        type: "2019年",
      },
      {
        time: "2016-08-10 02:00:00",
        value: -3,
        type: "2019年",
      },
      {
        time: "2016-09-10 02:20:00",
        value: 11,
        type: "2019年",
      },
      {
        time: "2016-10-10 02:20:00",
        value: 11,
        type: "2019年",
      },
      {
        time: "2016-11-10 02:20:00",
        value: 11,
        type: "2019年",
      },
      {
        time: "2016-12-10 02:20:00",
        value: 11,
        type: "2019年",
      },
    ];
    var data2 = [
      {
        time: "Jan.",
        "税收(亿)": 1000,
      },
      {
        time: "Feb.",
        "税收(亿)": 2200,
      },
      {
        time: "Mar.",
        "税收(亿)": 2000,
      },
      {
        time: "Apr.",
        "税收(亿)": 2600,
      },
      {
        time: "May.",
        "税收(亿)": 2000,
      },
      {
        time: "Jun.",
        "税收(亿)": 2600,
      },
      {
        time: "Jul.",
        "税收(亿)": 2800,
      },
      {
        time: "Aug.",
        "税收(亿)": 2000,
      },
    ];
    var data3 = [
      {
        name: "数字经济",
        percent: 32,
        a: "1",
      },
      {
        name: "文化创意",
        percent: 23,
        a: "1",
      },
      {
        name: "高端制造",
        percent: 6,
        a: "1",
      },
      {
        name: "时尚行业",
        percent: 7,
        a: "1",
      },
      {
        name: "金融服务",
        percent: 7,
        a: "1",
      },
      {
        name: "休闲旅游",
        percent: 3,
        a: "1",
      },
      {
        name: "生物健康",
        percent: 12,
        a: "1",
      },
      {
        name: "其他",
        percent: 10,
        a: "1",
      },
    ];
    var data4 = [
      {
        name: "0-100万",
        percent: 0.4,
        a: "1",
      },
      {
        name: "100万-500万",
        percent: 0.2,
        a: "1",
      },
      {
        name: "500万-1000万",
        percent: 0.18,
        a: "1",
      },
      {
        name: "1000万-5000万",
        percent: 0.15,
        a: "1",
      },
      {
        name: "5000万以上",
        percent: 0.05,
        a: "1",
      },
    ];
    var map4 = {
      "0-100万": "40%",
      "100万-500万": "20%",
      "500万-1000万": "18%",
      "1000万-5000万": "15%",
      "5000万以上": "5%",
    };
    var data5 = [
      {
        Group: "0-100万",
        seats: 25,
        const: "1",
      },
      {
        Group: "100万-500万",
        seats: 30,
        const: "1",
      },
      {
        Group: "500万-1000万",
        seats: 18,
        const: "1",
      },
      {
        Group: "1000万-5000万",
        seats: 15,
        const: "1",
      },
      {
        Group: "5000万以上",
        seats: 10,
        const: "1",
      },
    ];
    this.getJDSSHBY();
    this.getJDSSZSFX();
    this.getCYSSGXPH();
    this.getBNDQYNSFX();
    this.getBNDYQSSFX();
    // jiedaoshuishouhuanbi("jiedaoshuishouhuanbi", data1);
    // chanyeshuishougongxian("chanyeshuishougongxian", data3);
    // qiyenashuifenxi("qiyenashuifenxi", data4, map4);
    // yuanqushuishoufenxi("yuanqushuishoufenxi", data5);
  },
  methods: {
    // 企业纳税走势
    getJDSSZSFX() {
      this.$api.chartsApi({ type: "getJDSSZSFX" }).then((res) => {
        console.log(res);
        let chartData = [];
        res.data.data.num.forEach((event, index) => {
          chartData.push({
            time: res.data.data.time[index],
            "税收(万)": (event/10000).toFixed(2)-0,
          });
        });
        jiedaoshuishouzoushi("jiedaoshuishouzoushi", chartData,4,'税收(万)');
      });
    },
    // 企业纳税环比
    getJDSSHBY() {
      this.$api.chartsApi({ type: "getJDSSHBY" }).then((res) => {
        console.log(res);
        // let chartData = [];
        // const nowYear = new Date().getFullYear();
        // res.data.data.thisYear.forEach((event, index) => {
        //   chartData.push({
        //     time: res.data.data.months[index].substring(
        //       0,
        //       res.data.data.months[index].length - 1
        //     ),
        //     value: event,
        //     type: `${nowYear}年`,
        //   });
        // });
        // res.data.data.lastYear.forEach((event, index) => {
        //   chartData.push({
        //     time: res.data.data.months[index].substring(
        //       0,
        //       res.data.data.months[index].length - 1
        //     ),
        //     value: event,
        //     type: `${nowYear - 1}年`,
        //   });
        // });
        // jiedaoshuishouhuanbi("jiedaoshuishouhuanbi", chartData);

        let chartData = [];
        res.data.data.num.forEach((event, index) => {
          if(event!=0){
            if(index==0){
              chartData.push({
                time: '01',
                "百分比": 0,
              });
            }else{
              chartData.push({
                time: res.data.data.months[index].length==3?res.data.data.months[index].slice(0,2):0+res.data.data.months[index].slice(0,1),
                "百分比": ((event-res.data.data.num[index-1])*100/res.data.data.num[index-1]).toFixed(2),
              });
            }
          }
        });
        jiedaoshuishouzoushi("jiedaoshuishouhuanbi", chartData,10,'百分比');
      });
    },
    // 产业税收贡献排行
    getCYSSGXPH() {
      this.$api.appChartsApi({ type: "getCYSSGXPH" }).then((res) => {
        let chartData = [];
        res.data.data.num.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyeshuishougongxian("chanyeshuishougongxian", chartData);
      });
    },
    // 切换去年今年
    tabsChange(name, title) {
      if (!name || this.lastYearFlag) return;
      this.$api.appChartsApi({ type: "getCYSSGXPH" }).then((res) => {
        this.lastYearFlag++;
        let chartData = [];
        res.data.data.lastYear.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyeshuishougongxian("qunianchanyeshuishougongxian", chartData);
      });
    },
    // 本年度企业纳税分析
    getBNDQYNSFX() {
      this.$api.appChartsApi({ type: "getBNDQYNSFX" }).then((res) => {
        const data = res.data.data.num;
        let chartData = [];
        let mapData = {
          "0-100万": data[0],
          "100-500万": data[1],
          "500-1000万": data[2],
          "1000-5000万": data[3],
          "5000万以上": data[4],
        };
        data.forEach((event, index) => {
          chartData.push({
            name: Object.keys(mapData)[index],
            percent: event.substring(0, event.length - 1) / 100,
          });
        });
        qiyenashuifenxi("qiyenashuifenxi", chartData, mapData);
      });
    },
    // 本年度园区税收分析
    getBNDYQSSFX() {
      this.$api.appChartsApi({ type: "getBNDYQSSFX" }).then((res) => {
        const data = res.data.data.num;
        let chartData = [
          {
            Group: "0-100万",
            seats: data[0].substring(0, data[0].length - 1) - 0,
            const: "1",
          },
          {
            Group: "100-500万",
            seats: data[1].substring(0, data[1].length - 1) - 0,
            const: "1",
          },
          {
            Group: "500-1000万",
            seats: data[2].substring(0, data[2].length - 1) - 0,
            const: "1",
          },
          {
            Group: "1000-5000万",
            seats: data[3].substring(0, data[3].length - 1) - 0,
            const: "1",
          },
          {
            Group: "5000万以上",
            seats: data[4].substring(0, data[4].length - 1) - 0,
            const: "1",
          },
        ];
        console.log("chartData", chartData);
        yuanqushuishoufenxi("yuanqushuishoufenxi", chartData);
      });
    },
  },
};
</script>

<style scoped lang="less">
.root {
  padding: 0 20px;
}
.van-row {
  flex-wrap: wrap;
}
.col {
  text-align: center;
  background: #fff;
  padding: 20px 0;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.chart-wrapper {
  width: cale(100% - 20px);
  height: 300px;
  margin: 10px 0 65px;
}
.chart-wrapper canvas {
  width: 100%;
  height: 100%;
}
.chart-wrapper2 {
  margin: 10px 0;
}
canvas {
  background: #fff;
  padding-bottom: 10px;
}
p {
  margin: 0;
}
.content-box {
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  height: 30px;
  background: #fff;
}
.point {
  float: left;
  margin-top: 5px;
  margin-left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(66, 122, 243);
}
.color2 {
  background: #7ecf51;
}
.color3 {
  background: #eecb5f;
}
.color4 {
  background: #e3935d;
}
.color5 {
  background: #e16757;
}
.content-box .right-box {
  width: calc(100% - 40px);
  margin-right: 10px;
  float: right;
  display: flex;
  justify-content: space-between;
}
.content-box .right-box p:nth-child(1) {
  font-size: 14px;
  color: #000;
}
.content-box .right-box p:nth-child(2) {
  font-size: 12px;
  color: #ccc;
}
.chart-wrapper .col {
  font-size: 12px;
  background: #8dcdee;
  box-shadow: none;
}
.last-box {
  background: #fff;
  padding: 0 10px 20px;
  margin-bottom: 10px;
}
.content-father {
  height: 320px;
  overflow: auto;
}
.chart-big {
  height: 450px;
}
.chart-tab{
  height: 490px;
}
.yuanqushuishoufenxi {
  height: 380px;
}
.van-tabs--card {
  background: #fff;
}
.van-tab__pane,
.van-tabs__content,
.van-tab__pane-wrapper {
  height: 470px;
}
.chart-wrapper /deep/ .van-tabs__nav--card {
  border-color: #49a9ee;
}
.van-tab__pane-wrapper /deep/ .van-tab__pane {
  height: 460px;
}
.chart-wrapper /deep/ .van-tab {
  color: #49a9ee;
  border-color: #49a9ee;
}
.chart-wrapper /deep/ .van-tab--active {
  background: #49a9ee;
  color: #fff;
}
</style>
